<template>
  <div class="article-detail-container">
    <!-- 返回按钮 -->
    <div class="navigation-bar">
      <button class="back-btn" @click="goBack">
        <el-icon>
          <ArrowLeft/>
        </el-icon>
        返回文章列表
      </button>
    </div>

    <!-- 文章头部信息 -->
    <header class="article-header">
      <h1 class="article-title">{{ articleData.title }}</h1>
      <div class="meta-info">
        <span class="author">作者：{{ articleData.publishBy }}</span>
        <span class="publish-time">发布时间：{{ articleData.publishTime }}</span>
      </div>
    </header>

    <!-- 文章内容 -->
    <section
        class="article-content"
        v-html="sanitizedContent"
        v-loading="loading"
    ></section>

    <!-- 底部交互 -->
    <!--<footer class="article-actions">-->
    <!--  <div class="action-buttons">-->
    <!--    <button-->
    <!--        class="like-btn"-->
    <!--        :class="{ 'active': isLiked }"-->
    <!--        @click="handleLike(articleId.value)"-->
    <!--    >-->
    <!--      <el-icon>-->
    <!--        <Star/>-->
    <!--      </el-icon>-->
    <!--      {{ articleData.likeCount }}-->
    <!--    </button>-->
    <!--    <button-->
    <!--        class="collect-btn"-->
    <!--        :class="{ 'active': isCollected }"-->
    <!--        @click="handleCollect"-->
    <!--    >-->
    <!--      <el-icon>-->
    <!--        <Sugar/>-->
    <!--      </el-icon>-->
    <!--      {{ articleData.collectCount }}-->
    <!--    </button>-->
    <!--  </div>-->
    <!--</footer>-->
  </div>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import {loadArticleDetail} from "@/api/articles/articles.js";
import DOMPurify from "dompurify";
import {ArrowLeft, Star} from '@element-plus/icons-vue'

const {proxy} = getCurrentInstance();
const articleId = ref(null);
const articleData = ref({});
const loading = ref(true);

function goBack() {
  proxy.$router.push('/articlesList');
}

const sanitizedContent = computed(() => {
  return DOMPurify.sanitize(articleData.value.content)
})

// 点赞
function handleLike(articleId) {
  like(articleId).then(res=>{
    console.log("点赞成功")
  })
}


// 获取文章详情
function getArticleDetail() {
  loadArticleDetail(articleId.value).then(res => {
    articleData.value = res.data;
    loading.value = false;
  })
}

onMounted(() => {
  articleId.value = proxy.$route.query.articleId;
  getArticleDetail();
})
</script>

<style scoped lang="scss">
.article-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px;
}

.navigation-bar {
  margin-bottom: 30px;

  .back-btn {
    background: none;
    border: none;
    color: #8AA2A9;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.8;
    }

    .iconfont {
      margin-right: 8px;
    }
  }
}

.article-header {
  margin-bottom: 40px;
  text-align: center;

  .article-title {
    font-size: 2.2rem;
    color: #4A4A4A;
    margin-bottom: 15px;
    line-height: 1.3;
    font-family: 'Noto Serif SC', serif;
  }

  .meta-info {
    color: #999;
    font-size: 14px;

    span {
      margin: 0 10px;
    }
  }
}

.article-content {
  line-height: 1.8;
  font-size: 16px;
  color: #444;

  // 富文本内容样式增强
  :deep() {
    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 20px auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    p {
      margin: 1.2em 0;
    }

    h2, h3 {
      color: #4A4A4A;
      margin: 1.5em 0 1em;
      font-family: 'Noto Serif SC', serif;
    }

    blockquote {
      border-left: 4px solid #A5C4B5;
      padding: 10px 20px;
      margin: 20px 0;
      background: #f8f8f8;
      color: #666;
    }
  }
}

.article-actions {
  margin-top: 50px;
  border-top: 1px solid #eee;
  padding-top: 30px;

  .action-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;

    button {
      padding: 12px 25px;
      border: none;
      border-radius: 25px;
      background: #f5f5f5;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;

      &.active {
        background: #A5C4B5;
        color: white;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(138, 162, 169, 0.15);
      }

      .iconfont {
        margin-right: 8px;
      }
    }
  }
}
</style>
